import vwPanel from './vwPanel.js';
import xID from "./xID.js";
import {replaceByObj} from "./xUtil.js";

const tmplBase = `
<div class="modal" tabindex="-1" style="display:none" id="{{id}}">
  <div class="modal-dialog {{style}}">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">详细信息</h5>
        <div class ="modal-control">
          <span class="iFullScreen flat" type ="full-screen" ></span>
          <span class="iClose flat" type ="close"></span>
        </div>
      </div>
      <div class="modal-body">
         <div  id ="{{panelId}}"></div>
      </div>
    </div>
  </div>
</div>
` ;

/*
   cfg:
   {
   	binds,
    col: ,
    grid:,
    obj: ,
              	
   }
 * */
export default class xViewModal {
    $root;
    
    vIDs = {
    	id:xID.getID(),
    	panelId:xID.getID()
    }
    
    vCfg;
    vPanel;
	// 构造函数
	constructor(cfg) {
        this.vCfg = cfg;
        $('body').append(replaceByObj(tmplBase,{...this.vIDs,style:cfg.style||''}));
        this.$root = $('#'+this.vIDs.id);

        this.init();
	};

	/* 渲染区块 开始 */
	init() {
		this.initPanel();
	    this.$root.on('click','[type ="full-screen"]',this.evFull.bind(this));
        this.$root.on('click','[type="close"]',this.evClose.bind(this));
        this.$root.on('click',this.evOff.bind(this));
	}
	
	initPanel(){		
		this.vPanel = new vwPanel({
        el: this.vIDs.panelId,
        data: this.vCfg.data,
        col: this.vCfg.col,
        grid:"container",
        obj: this.vCfg.obj,
        group:this.vCfg.group
        });
	}

	show(obj){
        this.vPanel.refresh(obj);
	    this.$root.fadeIn();
    }

	evFull(e){
       let $dialog = this.$root.find('.modal-dialog') ;
       let $span = this.$root.find('[type="full-screen"]');
       if($dialog.hasClass('modal-fullscreen')){
       	   $dialog.removeClass('modal-fullscreen');
           $span.removeClass('iExitFull');
           $span.addClass('iFullScreen');
       }else{
       	   $dialog.addClass('modal-fullscreen');
           $span.addClass('iExitFull');
           $span.removeClass('iFullScreen');
       }

    }

    evClose(e){
	    this.$root.hide();
        if(this.vCfg && this.vCfg.cancle)
            this.vCfg.cancle();
    }

    evOff(e){
        if(e.target == e.currentTarget)
            this.evClose(null);
    }

}